<template>
  <div>
    <div class="card-header">
      <span>{{ title }}</span>
      <i class="icon"></i>
    </div>
    <div class="card-content">{{ count }}</div>
    <div class="card-charts">
      <slot name="charts"></slot>
    </div>
    <div class="card-footer">
      <slot name="foot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "count"],
};
</script>

<style>
@font-face {
  font-family: "icomoon";
  src: url("~@/assets/fonts/icomoon.eot?tomleg");
  src: url("~@/assets/fonts/icomoon.eot?tomleg#iefix")
      format("embedded-opentype"),
    url("~@/assets/fonts/icomoon.ttf?tomleg") format("truetype"),
    url("~@/assets/fonts/icomoon.woff?tomleg") format("woff"),
    url("~@/assets/fonts/icomoon.svg?tomleg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon {
  font-family: "icomoon";
}
i {
  text-decoration: none;
}
.card-header {
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
  font-size: 14px;
}
.card-content {
  font-size: 30px;
  padding: 10px 0;
}
.card-charts {
  height: 55px;
  border-bottom: 1px solid #eee;
}
.card-footer {
  margin-top: 8px;
}
</style>